import React from 'react';
import "./index.css";
import RightSolid from "../../Common/svg/RightSolid";
import LeftSolid from '../../Common/svg/LeftSolid';

export default class extends React.Component{
    constructor(props){
        super();
        this.state={
            imgs:props.imgs,
            size:props.size,
            width:props.width,
            height:props.height,
            startIndex:props.startIndex,
            showImg:[]
        }
    }

    componentDidMount(){
        this.GenImg();
    }

    Left(){
        this.AddIndex(-1);
    }
    Right(){
        this.AddIndex(1);
    }
    AddIndex(step){
        let newStep=this.state.startIndex+step;

        if(newStep < 0 || newStep > (this.state.imgs.length-this.state.size -1)){
            // console.log("return")
            return;
        }

        this.setState({
            startIndex:newStep
        },()=>{
            this.GenImg();
        });
    }
    GenImg(){
        let img=[];
        for(let i=0;i<this.state.size;i++){
            let index=this.state.startIndex+i;
            if(this.state.imgs[index] !== undefined){
                // console.log(this.state.imgs[index])
                img.push(
                    <img src={this.state.imgs[index]} width={this.state.width} 
                    height={this.state.height} alt="imgList" 
                    className={i===1?"ImgList_MiddleImg ImgList_ImgShow":"ImgList_ImgShow"}/>
                );
            }
        }
        console.log(img)

        this.setState({
            showImg:img
        })
    }
    render()
    {
        
        return(
            <span style={{backgroundColor:this.state.color}}>
                <span className="ImgList_LeftSVG" onClick={e=>this.Left(e)}><LeftSolid/> </span>
                {this.state.showImg}
                <span className="ImgList_RightSVG" onClick={e=>this.Right(e)}><RightSolid/></span>
            </span>
        );
    }
}